<template>
  <div>
    <el-form
      label-position="left"
      label-width="100px"
      :model="formData"
      style="max-width: 460px; margin: 50px auto"
    >
      <el-form-item label="账号" prop="userName">
        <el-input
          v-model.trim="formData.userName"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input
          v-model.trim="formData.password"
          placeholder="请输入新密码"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item label="再次确认" prop="confirm">
        <el-input
          v-model="formData.confirm"
          placeholder="请再次输入密码，确认相同"
          type="password"
        />
      </el-form-item>
      <div style="display: flex; justify-content: center">
        <el-button @click="update">确认</el-button>
      </div>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import _service from "../../service/host.js";
import { useRouter } from "vue-router";
const formData = reactive({
  userName: "",
  password: "",
  confirm: "",
});
const router = useRouter();
const update = () => {
  _service
    .updateItem({
      userName: formData.userName,
      password: formData.password,
    })
    .then((res: any) => {
      console.log(res);
      ElMessage({
        message: "操作成功，跳转登录页...",
        type: "success",
      });

      setTimeout(() => {
        router.push({
          path: "/login",
        });
      }, 1500);
    })
    .catch((err) => {
      console.error(err);
    });
};
</script>
<style lang="scss" scoped></style>
